<template>
  <!-- flex 布局组件 -->
  <div
    class="flex"
    :style="{
      'flex-direction': direction,
      'justify-content': justify,
      'align-items': align,
      'align-content': alignContent,
      'align-self': alignSelf,
      'flex-wrap': flexWrap
    }"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'flex',
  props: {
    // 布局: row/column/row-reverse/column-reverse
    direction: {
      type: String,
      default: 'row'
    },
    // 对齐方式: flex-start | center | flex-end | flex-between | flex-around | space-between
    justify: {
      type: String,
      default: 'flex-start'
    },
    // 交叉轴对其方式 flex-start | flex-end | center | baseline | stretch
    align: {
      type: String,
      default: 'center'
    },
    // 多根轴线对其方式 flex-start | flex-end | center | space-between | space-around | stretch
    alignContent: {
      type: String,
      default: 'stretch'
    },
    // 与统计项目不一致的对齐方式 auto | flex-start | flex-end | center | baseline | stretch
    alignSelf: {
      type: String,
      default: 'auto'
    },
    // 是否换行 nowrap | wrap | wrap-reverse
    flexWrap: {
      type: String,
      default: 'nowrap'
    }
  },
  data () {
    return {}
  },
  mounted () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
</style>
